<template>
    <el-tabs v-model="activeName" class="tabs" type="border-card">
        <el-tab-pane name="park" label="车位管理"><Park /></el-tab-pane>
        <el-tab-pane name="plate" label="车牌管理"><Plate /></el-tab-pane>
        <el-tab-pane name="cost" label="应急计费"><Cost /></el-tab-pane>
    </el-tabs>
</template>

<script setup>
    import { ref,getCurrentInstance,onActivated } from 'vue'
    import Park from './park.vue'
    import Plate from './plate.vue'
    import Cost from './cost.vue'
    let { proxy } = getCurrentInstance()

    let activeName = ref('park')
    onActivated((e)=>{
        activeName.value = proxy.$route.query.tabname||'park'
    })
</script>

<style lang="scss" scoped>
    .tabs {
         display: flex; flex-direction: column; height: 100%; box-shadow: none; border-radius: 5px; border: 0; 
    }
    .tab { height: 100%; }
</style>